<template>
	<view class="groupactivepost">
		<view class="groupmanage_input_box">
			<view class="mr-5">活动类型</view>
			<view class="flex-1" v-for="item in range" :key="item.value" v-if="form.type==item.value">{{item.text}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">活动标题</view>
			<view class="flex-1">{{form.title}}</view>
		</view>
		<view class="content_cell_box">
			<view class="mr-5 f-13">活动简介</view>
			<view class="groupmanage_textarea mt-10">
				<view style="height: 140rpx;">
					<text>{{form.desc}}</text>
				</view>
			</view>
		</view>
		<view class="content_cell_box">
			<view class="mb-10 display_flex">
				<view class="f-14 flex-1">活动封面图</view>
				<view class="c-666666 f-11">图片比例为3:1</view>
			</view>
			<image v-if="form.cover" class="active_cover_img" :src="picUrl+form.cover" mode="aspectFill">
			</image>
			<view v-else class="active_cover_img_block"></view>
		</view>
		<view class="content_cell_box">
			<view class="mb-10 display_flex">
				<view class="f-14 flex-1">活动头图</view>
				<view class="c-666666 f-11">图片比例为2:1</view>
			</view>
			<image v-if="form.pic" class="active_top_img" :src="picUrl+form.pic" mode="widthFix">
			</image>
			<view v-else class="active_top_img_block"></view>
		</view>
		<view class="content_cell_box">
			<view class="mb-10 display_flex">
				<view class="f-14 flex-1">活动分享图</view>
				<view class="c-666666 f-11">图片比例为5:4</view>
			</view>
			<image v-if="form.share_pic" class="active_share_img" :src="picUrl+form.share_pic" mode="widthFix">
			</image>
			<view v-else class="active_share_img_block"></view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">开始时间</view>
			<view class="flex-1">{{form.start_time}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">结束时间</view>
			<view class="flex-1">{{form.end_time}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">城市</view>
			<view class="flex-1">{{form.city}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">详细地址</view>
			<view class="flex-1">{{form.address}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">日期文案</view>
			<view class="flex-1">{{form.date}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">时间文案</view>
			<view class="flex-1">{{form.time}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">招募人数</view>
			<view class="flex-1">{{form.recruit_number}}</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5">审核人数</view>
			<view class="flex-1">{{form.number}}</view>
		</view>
		<!-- <view class="f-14 mb-10 mt-15 f-w">活动信息</view> -->
		<view class="content_cell_box" v-for="(item,index) in form.content" :key="index">
			<view class="display_flex mb-10" style="justify-content: space-between;">
				<view class="f-14">活动内容</view>
			</view>
			<view class="groupmanage_textarea">
				<view style="min-height: 40rpx;">
					<text>{{item.text}}</text>
				</view>
			</view>
			<view class="groupmanage_img">
				<view class="f-14 mb-10">图片(最多上传3张，图片比例5:4)</view>
				<uni-row class="" gutter="10">
					<uni-col v-for="(itemi,indexi) in item.images" :key="itemi" :span="8">
						<view class="content_img_box">
							<image class="content_img" :src="picUrl+itemi" mode="aspectFill">
							</image>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5 display_flex">
				<view style="width: 160rpx;">允许带宠物</view>
				<view class="display_flex ml-20">
					<uni-icons v-if="form.is_pet==1" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>是</span>
				</view>
				<view class="display_flex ml-25">
					<uni-icons v-if="form.is_pet==2" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>否</span>
				</view>
			</view>
		</view>
		<view v-if="form.is_pet==1" class="groupmanage_input_box">
			<view class="mr-5">宠物类型</view>
			<uni-data-select class="flex-1 f-12" v-model="pet_type" :localdata="petTypelist"
				:clear="false"></uni-data-select>
		</view>
		<view v-if="form.is_pet==1" class="groupmanage_input_box">
			<view class="mr-5">宠物数量</view>
			<uni-data-select class="flex-1 f-12" v-model="pet_num" :localdata="petNumlist"
				:clear="false"></uni-data-select>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5 display_flex">
				<view style="width: 160rpx;">上传爱车靓照</view>
				<view class="display_flex ml-20">
					<uni-icons v-if="form.is_pic==1" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>是</span>
				</view>
				<view class="display_flex ml-25">
					<uni-icons v-if="form.is_pic==2" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>否</span>
				</view>
			</view>
		</view>
		<view class="groupmanage_input_box">
			<view class="mr-5 display_flex">
				<view style="width: 160rpx;">允许带儿童</view>
				<view class="display_flex ml-20">
					<uni-icons v-if="form.is_child==1" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>是</span>
				</view>
				<view class="display_flex ml-25">
					<uni-icons v-if="form.is_child==2" type="circle-filled" size="18" color="#191919"></uni-icons>
					<uni-icons v-else type="circle" color="#191919" size="18"></uni-icons>
					<span>否</span>
				</view>
			</view>
		</view>
		<view v-if="form.is_child==1" class="groupmanage_input_box">
			<view class="mr-5">年龄</view>
			<uni-data-select class="flex-1 f-12" v-model="child_age" :localdata="childAgelist"
				:clear="false"></uni-data-select>
		</view>
		<view v-if="form.is_child==1" class="groupmanage_input_box">
			<view class="mr-5">人数</view>
			<uni-data-select class="flex-1 f-12" v-model="child_num" :localdata="childNumlist"
				:clear="false"></uni-data-select>
		</view>
		<view class="next_step_btn" @click="submitForm">预览</view>
	</view>
</template>

<script>
	import {
		getAdminGroupActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				value: 0,
				startDate1: '',
				datetimerange: [],
				range: [],
				form: {
					type: '',
					title: '',
					desc: '',
					pic: '',
					content: [{
						text: '',
						images: []
					}],
					is_pet: 0,
					is_pic: 0,
					is_child: 0,
					city: ''
				},
				files: [],
				name: '',
				text: '',
				isSubmit: true,
				petTypelist: [{
						value: 1,
						text: "狗"
					},
					{
						value: 2,
						text: "猫"
					},
					{
						value: 3,
						text: "其他"
					}
				],
				petNumlist: [],
				childNumlist: [],
				childAgelist: [],
				pet_num: '',
				pet_type: '',
				child_num: '',
				child_age: '',
				picUrl: app.globalData.picUrl
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.startDate1 = year + '-' + month + '-' + day
			if (uni.getStorageSync('userinfo').is_staff == 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad(options) {
			this.club_id = options.club_id
			this.huodong_id = options.huodong_id
			if (uni.getStorageSync('userinfo').is_staff != 0) {
				if (options.huodong_id) {
					this.getAdminGroupActiveInfo()
				}
			}
			this.range = uni.getStorageSync('clubconfig') ? uni.getStorageSync('clubconfig').range : []
			this.query = uni.createSelectorQuery().in(this);
			this.query.selectViewport().scrollOffset().exec(res => {
				console.log('页面滚动距离', res.scrollTop); // 输出页面滚动的垂直距离  
			});
			this.petNumlist = Array.from({
				length: 5
			}, (_, index) => ({
				value: index + 1, // 从1开始计数  
				text: index + 1 + '只' // 对应的文本  
			}));
			this.childNumlist = Array.from({
				length: 5
			}, (_, index) => ({
				value: index + 1, // 从1开始计数  
				text: index + 1 + '人' // 对应的文本  
			}));
			this.childAgelist = Array.from({
				length: 18
			}, (_, index) => ({
				value: index + 1, // 从1开始计数  
				text: index + 1 + '岁' // 对应的文本  
			}));
			var params = {
				event_code: '活动发布管理',
				path: 'pages/groupmanage/groupactivepost',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			bindPickerChange(e) {
				this.form.city = e.detail.value.join('')
			},
			getAdminGroupActiveInfo() {
				getAdminGroupActiveInfo({
					huodong_id: this.huodong_id
				}).then(res => {
					if (res.state == 1) {
						this.form = res.data.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeType(e) {
				this.form.type = e
			},
			changeSatrtTime(e) {
				this.form.start_time = e
			},
			changeEndTime(e) {
				this.form.end_time = e
			},
			addContent() {
				this.query.selectViewport().scrollOffset().exec(res => {
					var scrollTop = res[0].scrollTop + 280
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 300
					});
				});
				var list = {
					text: '',
					images: []
				}
				this.form.content.push(list)

			},
			delContent(index) {
				var that = this
				uni.showModal({
					content: '确定删除这一活动内容吗',
					confirmColor: '#00A0DC',
					success: function(res) {
						if (res.confirm) {
							that.form.content.splice(index, 1)
							that.query.selectViewport().scrollOffset().exec(res => {
								var scrollTop = res[0].scrollTop - 280
								uni.pageScrollTo({
									scrollTop: scrollTop,
									duration: 300
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			uploadContent(index) {
				var that = this
				var countNum = 3 - that.form.content[index].images.length
				if (countNum > 0) {
					uni.chooseMedia({
						count: countNum,
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							uni.showLoading({
								title: '正在上传'
							})
							var tempFilePaths = res.tempFiles
							that.uploadImage(tempFilePaths, 0, index)
						}
					});
				} else {
					uni.showToast({
						title: '最多上传3张图片',
						icon: 'none',
						mask: true,
						duration: 1500
					})
				}
			},
			uploadImage(files, i, index) {
				var i
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: files[i].tempFilePath,
					name: 'img',
					success: (res) => {
						var picdata = JSON.parse(res.data);
						this.form.content[index].images.push(picdata.data.img);
						i++
						if (i < files.length) {
							this.uploadImage(files, i, index)
						} else {
							uni.hideLoading()
						}
					}
				});
			},
			delContentImg(index, indexi) {
				var that = this
				uni.showModal({
					content: '确定删除这张图片吗',
					confirmColor: '#00A0DC',
					success: function(res) {
						if (res.confirm) {
							that.form.content[index].images.splice(indexi, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// changeCheckbox(type) {
			// 	if (type == 1) {
			// 		this.form.is_pic = this.form.is_pic == 1 ? 0 : 1
			// 	} else if (type == 2) {
			// 		this.form.is_child = this.form.is_child == 1 ? 0 : 1
			// 	} else if (type == 3) {
			// 		this.form.is_pet = this.form.is_pet == 1 ? 0 : 1
			// 	}
			// },
			changePet(type) {
				this.form.is_pet = type
			},
			changeCarImg(type) {
				this.form.is_pic = type
			},
			changeChild(type) {
				this.form.is_child = type
			},
			submitForm() {
				uni.navigateTo({
					url: '/pages/groupmanage/socgroupactiveinfo?club_id=' + this.club_id +
						'&isCheck=1&huodong_id=' +
						this.huodong_id
				})

			}
		}
	}
</script>

<style lang="scss">
	.groupactivepost {
		padding: 30rpx;

		.groupmanage_input_box {
			height: 84rpx;
			font-size: 26rpx;
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.uni-select {
				border: 0px solid #E9E9E9 !important;
				box-sizing: border-box;
				border-radius: 4px;
				padding: 0 0 !important;
				border-bottom: solid 0px #E9E9E9 !important;
				width: 100%;
				flex: 1;
				height: 0 !important;
				margin-left: 10rpx;
				font-size: 26rpx;

			}

			.time_input {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				height: 84rpx;
				padding: 0 30rpx;
				flex: 1;
			}

			.icon-calendar {
				display: none;
			}

		}

		.groupmanage_img {
			margin-top: 30rpx;

			.active_top_img {
				width: 100%;
				// height: calc(50vw - 60rpx);
				border-radius: 8rpx;
			}

			.active_top_img_block {
				width: 100%;
				height: calc(50vw - 64rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F7F7F7;
			}

			.content_img_box {
				position: relative;
				width: 200rpx;
				height: 160rpx;
				border-radius: 8rpx;

				.content_img {
					width: 200rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}

				.content_img_del {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					z-index: 1;
					padding: 20rpx;
				}
			}


			.content_img_block {
				width: 198rpx;
				height: 158rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}
		}

		.groupmanage_textarea {
			font-size: 24rpx;
			padding: 20rpx;
			border-radius: 8rpx;
		}

		.content_cell_box {
			margin: 20rpx 0;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.active_top_img {
				width: 100%;
				// height: calc(50vw - 60rpx);
				border-radius: 8rpx;
			}

			.active_top_img_block {
				width: 100%;
				height: calc(50vw - 64rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}
			.active_share_img {
				width: 100%;
				// height: calc(50vw - 60rpx);
				border-radius: 8rpx;
			}
			
			.active_share_img_block {
				width: 100%;
				height: calc(80vw - 64rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}

			.active_cover_img {
				width: 100%;
				height: calc(33.333vw - 64rpx);
				border-radius: 8rpx;
			}

			.active_cover_img_block {
				width: 100%;
				height: calc(33.333vw - 64rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}
		}

		.next_step_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			padding: 25rpx 0;
			margin: 30rpx 0;
			border-radius: 8rpx;
			background-color: #00A0DC;
		}

		.next_step_text {
			color: #00A0DC;
			font-size: 26rpx;
			text-align: center;
			text-decoration: underline;
		}

		.uni-date__x-input {
			font-size: 26rpx;
			background-color: #F7F7F7;
		}

		.uni-select__input-placeholder {
			font-size: 26rpx;
		}
	}
</style>